<template>
    <div>
        <div class="layout-content-breadcrumb">
            <Breadcrumb>
                <Breadcrumb-item>投诉管理</Breadcrumb-item>
                <Breadcrumb-item>投诉列表</Breadcrumb-item>
            </Breadcrumb>
        </div>
        <div class="page-content">
            <div class="list-search" @keyup.enter="onSearch">
                <Row type="flex" :gutter="16">
                    <Col span="8">
                    <hx-input-item label="投诉对象">
                        <Input type="text" v-model="search.complaint_target" placeholder="投诉对象">
                        </Input>
                    </hx-input-item>
                    </Col>
                    <Col span="8">
                    <hx-input-item label="投诉分类">
                        <Select v-model="search.type" placeholder="请选择分类">
                            <Option v-for="item in types" :value="item.id" :key="item.id">{{item.name}}</Option>
                        </Select>
                    </hx-input-item>
                    </Col>
                    <Col span="8">
                    <Button type="primary" @click="onSearch">查询</Button>
                    </Col>
                </Row>
            </div>
            <Button type="primary" @click="onExportExcel">导出excel文件</Button>
            <Table :columns="columns" :data="dataSource"></Table>
            <div class="table-paging">
                <Page :total="totalNumber" :current="page" :page-size="pageSize" show-total @on-change="onPageChange"></Page>
            </div>
        </div>
        <Modal
                v-model="sendMsg.showModal"
                title="发送短信"
                :loading="false"
                @on-ok="onSureSendMsg">
            <Input type="textarea" :row="5" v-model="sendMsg.content" placeholder="请输入短信内容" size="large">
            </Input>
        </Modal>
        <Modal
                v-model="reply.showModal"
                title="回复用户"
                @on-ok="onSureReply">
            <Input type="textarea" :rows="5" v-model="reply.content" placeholder="请输入回复内容" size="large">
            </Input>
        </Modal>
        <Modal
                v-model="replyLog.showModal"
                title="回复记录">
            <Table :columns="replyLog.columns" :data="replyLog.dataSource"></Table>
        </Modal>
    </div>
</template>
<style lang="less">

</style>
<script>
    import api from 'service/complaint'
    export default{
        data(){
            return {
                page: 1,
                pageSize:10,
                totalNumber: 0,
                search: {
                    complaint_target: '',
                    type: '-1'
                },
                types: [],
                sendMsg: {
                    showModal: false,
                    id: '',
                    content: ''
                },
                reply: {
                    showModal: false,
                    id: '',
                    content: ''
                },
                replyLog:{
                    showModal:false,
                    columns:[
                        {
                            title: '服务人员',
                            key: 'name'
                        },
                        {
                            title: '回复内容',
                            key: 'content'
                        },
                        {
                            title: '回复时间',
                            key: 'time'
                        }
                    ],
                    dataSource:[]
                },
                statusMap: {
                    '0': '未受理',
                    '1': '受理',
                    '2': '调解',
                    '3': '完成'
                },
                columns: [
                    {
                        title: '投诉人',
                        key: 'complainant'
                    },
                    {
                        title: '投诉人手机号',
                        key: 'contact_phone'
                    },
                    {
                        title: '投诉对象',
                        key: 'complaint_target'
                    },
                    {
                        title: '投诉内容',
                        key: 'complaint_content',
                        render: (h, params) => {
                            let txt = params.row.complaint_content
                            if (txt.length > 15) {
                                txt = txt.slice(0, 15) + '...'
                            }
                            return h('span', {
                                attrs: {
                                    title: params.row.complaint_content
                                }
                            }, txt)
                        }
                    },
                    /*{
                        title: '备注',
                        key: 'remark',
                        render: (h, params) => {
                            let txt = params.row.remark
                            if (txt.length > 10) {
                                txt = txt.slice(0, 10) + '...'
                            }
                            return h('span', {
                                attrs: {
                                    title: params.row.remark
                                }
                            }, txt)
                        }
                    },*/
                    /*{
                        title: '受理对象',
                        key: 'disposal_worker',
                        render: (h, params) => {
                            return params.row.server.nick
                        }
                    },*/
                    {
                        title: '投诉时间',
                        key: 'created_at'
                    },
                    {
                        title: '当前状态',
                        key: 'status',
                        render: (h, params) => {
                          return this.statusMap[params.row.status + '']
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 320,
                        align: 'center',
                        render: (h, params) => {
                            let txt = ''
                            switch (params.row.status + '') {
                                case '0':
                                    txt = '受理'
                                    break;
                                case '1':
                                    txt = '调解'
                                    break;
                                case '2':
                                    txt = '完成'
                                    break;
                                case '3':
                                    txt = '已完成'
                                    break;
                                default:
                                    txt = '已完成'
                                    break;
                            }
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.onReply(params.row.id)
                                        }
                                    }
                                }, '回复'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.onReplyLog(params.row.id)
                                        }
                                    }
                                }, '回复记录'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push(`/complaintlist/detail/${params.row.id}`)
                                        }
                                    }
                                }, '详情'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.onStatusChange(params.row, txt)
                                        }
                                    }
                                }, txt),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.onSendMsg(params.row.id)
                                        }
                                    }
                                }, '发送短信')
                            ]);
                        }
                    }
                ],
                dataSource: []
            }
        },
        mounted(){
            this.getTypes()
            this.onPageChange(1)
        },
        methods: {
            onStatusChange(row, txt){
                let that = this
                if (row.status == '3') {
                    return that.$Message.warning('该投诉已完成，请勿再处理')
                }
                this.$Modal.confirm({
                    title: '投诉处理',
                    content: `确定${txt}吗？`,
                    onOk(){
                        api.updateComplaint({
                            id: row.id,
                            status: Number(row.status) + 1
                        }).then(() => {
                            that.$Message.success(txt + '成功！')
                            that.onPageChange(that.page)
                        })
                    }
                })
            },
            onSendMsg(id){
                this.sendMsg.showModal = true
                this.sendMsg.id = id
                this.sendMsg.content = ''
            },
            onSureSendMsg(){
                let content = this.sendMsg.content.trim()
                if (!content) {
                    return this.$Message.warning('请输入短信内容')
                }
                api.sendMsg({
                    id: this.sendMsg.id,
                    content: content
                }).then(() => {
                    this.$Message.success('短信发送成功！')
                    this.sendMsg.showModal = false
                })
            },
            onExportExcel(){
                this.postCall('/zhuantang/admin.php/Admin/APIComplaint/export_excel',{
                    complaint_target:this.search.complaint_target,
                    status:this.search.status==='-1'?undefined:this.search.status
                },'_blank')
            },
            postCall(url, params, target){
                var tempform = document.createElement("form");
                tempform.action = url;
                tempform.method = "post";
                tempform.style.display = "none"
                if (target) {
                    tempform.target = target;
                }

                for (var x in params) {
                    var opt = document.createElement("input");
                    opt.name = x;
                    opt.value = params[x];
                    tempform.appendChild(opt);
                }

                var opt = document.createElement("input");
                opt.type = "submit";
                tempform.appendChild(opt);
                document.body.appendChild(tempform);
                tempform.submit();
                document.body.removeChild(tempform);
            },
            onSearch(){
                this.onPageChange(1)
            },
            onPageChange(page){
                this.page = page
                api.getComplaint({
                    page: page,
                    per_page: this.pageSize,
                    complaint_target: this.search.complaint_target.trim(),
                    status: this.search.type === '-1' ? undefined : this.search.type
                }).then(({data}) => {
                    this.dataSource = (data.list || [])
                    this.totalNumber = Number(data.total_count)
                })
            },
            onReply(id){
                this.reply.showModal = true
                this.reply.id = id
                this.reply.content = ''
            },
            onSureReply(){
                let content = this.reply.content.trim()
                if (!content) {
                    return this.$Message.warning('请输入回复内容')
                }
                api.replyComplaint({
                    id: this.reply.id,
                    deal_suggestion: content
                }).then(() => {
                    this.$Message.success('回复成功！')
                    this.reply.showModal = false
                })
            },
            onReplyLog(id){
                this.replyLog.showModal=true
                api.getDetail({id:id})
                    .then(({data})=>{
                        this.replyLog.dataSource=(data.deal_suggestion||[]).map(item=>{
                            return {
                                name:item.server.nick,
                                content:item.deal_suggestion,
                                time:item.created_at
                            }
                        })
                    })
            },
            getTypes(){
                api.getComplaintCategory({need_count: '0'})
                    .then(({data}) => {
                        let types = (data || []).map(item => {
                            return {
                                id: item.type,
                                name: item.name
                            }
                        })
                        types.unshift({id: '-1', name: '全部'})
                        this.types = types
                    })
            }
        }
    }
</script>